<template>
  <div class="all">
<!--    <div id="bbsMyDiv">-->
<!--      <el-dropdown trigger="click" style="float: right">-->
<!--        <span class="el-dropdown-link">-->
<!--          <el-button type="success">点我查看<i class="el-icon-caret-bottom el-icon&#45;&#45;right"></i></el-button>-->
<!--        </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item-->
<!--            class="clearfix"-->
<!--          ><a @click="myArticleListFlag = true"> 我的帖子 </a>-->
<!--          </el-dropdown-item>-->
<!--          <el-dropdown-item class="clearfix">-->
<!--            <a @click="myLoveFlag = true">我的收藏</a>-->
<!--          </el-dropdown-item>-->
<!--          <el-dropdown-item class="clearfix">-->
<!--            <a @click="messageFlag = true">站内信</a>-->
<!--            <el-badge class="mark" :value="3" />-->
<!--          </el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--      <br style="clear: both">-->
<!--    </div>-->
    <div id="boardDiv" class="boardDiv">
      <el-card shadow="always">
        <div class="cardHead">
          <strong class="boardTitle"> 社区帮购需求征集 </strong>
<!--          <span>-->
<!--            今日新帖 :-->
<!--            <strong class="boardNumber">9</strong>-->
<!--            <span class="pipe">|</span>-->
<!--            总数 ：-->
<!--            <strong class="boardNumber">109</strong>-->
<!--          </span>-->
        </div>
        <div class="boardContent">
          需求征集板块旨在满足社区居民团购需求，由物业发起投票并根据统计结果进行采购计划 <br>
          采购商品在保证质量的同时价格会低于市场价格，请各位业主踊跃参与投票 <br>
          投票截止后采购人员会根据需求人数进行采购，商品到货后参与投票业主会获得通知，请业主自行购买。
          因为商品数量有限，请业主收到通知后尽快购买以免错过<br>
        </div>
      </el-card>
    </div>
    <div class="handupDiv">
      <span class="btnSpan">
        <el-button class="handupBtn" type="primary" @click="toNewDemand">
          发布需求 <i class="el-icon-document"></i>
        </el-button>
<!--        <el-button class="handupBtn" type="primary" @click="checkFlag = true">-->
<!--          举报审核 <i class="el-icon-s-check" />-->
<!--        </el-button>-->
      </span>
<!--      <span style="margin-left: 10px">-->
<!--        <el-input-->
<!--          v-model="searchWords"-->
<!--          placeholder="请输入内容"-->
<!--          class="input-with-select"-->
<!--          style="width: 420px"-->
<!--        >-->
<!--          <el-select-->
<!--            slot="prepend"-->
<!--            v-model="searchWordsType"-->
<!--            placeholder="请选择"-->
<!--            style="width: 120px"-->
<!--          >-->
<!--            <el-option label="文章标题" value="1" />-->
<!--            <el-option label="发帖人名称" value="2" />-->
<!--          </el-select>-->
<!--          <el-button slot="append" icon="el-icon-search" />-->
<!--        </el-input>-->
<!--      </span>-->
      <span class="pageSpan">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="refreshVoteList" />
      </span>
    </div>
    <div class="dividerDiv">
      <el-divider />
    </div>
<!--    <div id="themeDiv" class="themeDiv">-->
<!--      <el-row>-->
<!--        <el-button plain @click="getAllArticleList">全部</el-button>-->

<!--        <el-dropdown-->
<!--          v-for="(theme, index) in sections"-->
<!--          :id="index"-->
<!--          :key="theme"-->
<!--          split-button-->
<!--          class="el-dropdown"-->
<!--          @click="getList(index)"-->
<!--        >-->
<!--          {{ theme.sectionName }}-->
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item-->
<!--              v-for="(status, statusIndex) in themeStatus[index]"-->
<!--              :key="statusIndex"-->
<!--            ><a @click="getListBystatus(index, statusIndex)">{{ status }}</a>-->
<!--            </el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--        <el-button plain style="margin-left: 10px" @click="addFlag = true">-->
<!--          添加栏目-->
<!--          <i class="el-icon-plus"></i>-->
<!--        </el-button>-->
<!--      </el-row>-->
<!--    </div>-->
    <div class="articleDiv">
      <div class="articleList">
        <table>
          <thead>
            <tr>
              <td colspan="1">
                <span>帖子分类</span>
                <span>标题</span>
                <span>状态</span>
              </td>
              <td>发布者</td>
              <td></td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody v-for="items in contentList" :key="items">
            <tr>
              <td>
                <!-- <span @click="getList(items.themeId)">[{{ items.theme }}]</span> -->
                <a
                  href="javascript:;"
                  @click="getExListAndSetBtn(items.themeId)"
                >[{{ items.section }}]</a>
                <!-- <a href="/articleDetail">{{ items.title }}</a> -->
                <a @click="toDemand(items.voteId)">{{ items.voteTitle }}</a>
                <span>{{ items.status }}</span>
              </td>
              <td style="width: 135px">
                <p>{{ items.userId }}</p>
                <p>{{ items.date }}</p>
              </td>
              <td style="width: 85px">
                <el-button v-if="items.status==='投票中'" size="mini" type="warning" @click="updateStatus(items)">停止投票</el-button>
                <el-button v-if="items.status==='采购中'" size="mini" type="success" @click="updateStatus(items)">完成</el-button>
              </td>
              <td style="width: 135px">
                <el-button size="mini" type="danger" style="margin-left: 20px" @click="deleteVote(items.voteId)">删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-if="showgotop" id="back" @click="gotop">
      <i class="el-icon-caret-top"></i>
    </div>
    <!-- 我的帖子 弹出窗 -->
    <div>
      <el-dialog
        class="myArticleList"
        title="我的帖子"
        :visible.sync="myArticleListFlag"
        center
      >
        <el-table
          :data="myArticleList"
          border
          highlight-current-row
          style="display: flex"
        >
          <el-table-column align="center" label="提交时间" width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="帖子主题" width="120px">
            <template slot-scope="{ row }">
              <span>{{ row.theme }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="文章标题"
            style="min-width: 600px"
          >
            <template slot-scope="{ row }">
              <a @click="toDemand">{{ row.title }}</a>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="myArticleListFlag = false">取 消</el-button>
          <el-button
            type="primary"
            @click="myArticleListFlag = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 站内信 弹出框 -->
    <div>
      <el-dialog :visible.sync="messageFlag" title="站内信" center>
        <el-table :data="messages">
          <el-table-column prop="time" label="时间" width="160px" />
          <el-table-column prop="username" label="发信人" width="100px">
            <template slot-scope="scope">
              {{ scope.row.username }}
              <a href="#" title="管理员">
                <i
                  v-show="scope.row.username === 'admin'"
                  style="color: red"
                  class="el-icon-medal"></i>
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="message" label="内容">
            <template slot-scope="scope">
              在您的 "<a id="aToArticle" @click="toDemand">{{
                scope.row.title
              }}</a>" 中评论 {{ scope.row.message }}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="messageFlag = false">取 消</el-button>
          <el-button
            type="primary"
            @click="messageFlag = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 我的收藏 弹出框 -->
    <div>
      <el-dialog
        class="myArticleList"
        title="我的收藏"
        :visible.sync="myLoveFlag"
        center
      >
        <el-table
          :data="myArticleList"
          border
          highlight-current-row
          style="display: flex"
        >
          <el-table-column align="center" label="收藏时间" width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="帖子主题" width="120px">
            <template slot-scope="{ row }">
              <span>{{ row.theme }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="文章标题"
            style="min-width: 600px"
          >
            <template slot-scope="{ row }">
              <a @click="toDemand">{{ row.title }}</a>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="myLoveFlag = false">取 消</el-button>
          <el-button
            type="primary"
            @click="myLoveFlag = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 添加栏目 -->
    <el-dialog title="添加栏目" center :visible.sync="addFlag">
      <el-form :model="formForNewColumn">
        <el-form-item
          label="栏目名称:"
          prop="columnName"
          style="display: block"
        >
          <el-input v-model="formForNewColumn.columnName" width="100px" />
        </el-form-item>
        <div v-for="(item, index) in formForNewColumn.status" :key="item">
          <el-form-item
            label="帖子状态"
            :prop="'status' + index + '.statusName'"
          >
            <el-input v-model="formForNewColumn.status.statusName" />
            <el-button
              v-show="index > 0"
              type="text"
              icon="el-icon-delete"
              @click="deleteStatus(item, index)"
            >删除</el-button>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button
            type="text"
            style="position: relative"
            @click="addStatus"
          ><i class="el-icon-circle-plus"></i>新增帖子状态</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 举报审核 -->
    <div>
      <el-dialog :visible.sync="checkFlag" title="举报列表" center>
        <el-table :data="checkList">
          <el-table-column prop="time" label="时间" width="160px" />
          <el-table-column prop="checkManName" label="举报人">
            <template slot-scope="scope">
              {{ scope.row.checkManName
              }}<i
                v-show="scope.row.username === 'admin'"
                style="color: red"
                class="el-icon-medal"></i>
            </template>
          </el-table-column>
          <el-table-column prop="checkedManName" label="被举报人" />
          <el-table-column prop="title" label="标题">
            <template slot-scope="scope">
              <a :href="scope.row.url" class="checkMessage">{{
                scope.row.title
              }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="checkType" label="举报类型" />
          <el-table-column prop="memo" label="举报理由" />
        </el-table>
        <span slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="checkFlag = false">取 消</el-button>
          <el-button type="primary" @click="checkFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/bbs/article-list'
import { deleteHelpVoteById, getAllSections, getAllVotes, updateVoteContent } from '../../api/communityHelp/vote'
export default {
  name: 'Demand',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
        // voteId: null,
        // userId: null,
        // voteTitle: null,
        // date: null,
        // content: null,
        // communityId: null,
        // status: null,
        // section: null,
        // options: []
      },
      vote: {
        voteId: '',
        userId: '',
        voteTitle: '',
        date: '',
        content: '',
        communityId: '',
        status: '',
        section: ''
      },
      total: 0,
      checkFlag: false, // 举报审核 dialog开启标志
      searchWords: '',
      searchWordsType: '',
      myArticleListFlag: false, // 我的帖子 dialog开启标志
      myLoveFlag: false, // 我的收藏 dialog开启标志
      addFlag: false, // 增加板块 dialog开启标志
      formForNewColumn: {
        columnName: '',
        status: [
          {
            statusName: ''
          }
        ]
      },
      myArticleList: [
        {
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        }
      ],
      messages: [
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: 'admin',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        }
      ],
      checkList: [
        {
          url: '',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          checkManId: 1,
          checkManName: 'passby',
          checkedManId: 2,
          checkedManName: '爱吃苹果的猫',
          checkType: '其他违规信息',
          memo: '存在假货伪装成正品买的情况',
          time: '2021-05-31 19:17:32'
        }
      ],
      // ArticleList: null,
      // themeWords: [],
      // themeStatus: null,
      themeWords: ['柴米油盐', '新鲜蔬菜', '时令水果'],
      themeStatus: [
        ['默认'],
        // ['默认', '[已置换]'],
        // ['默认', '[已过期]'],
        ['默认', '[已完成]'],
        ['默认', '[投票中]'],
        ['默认', '[采购中]'],
        ['默认']
      ],
      allArticleList: [
        {
          themeId: 2,
          title: '东北大米两元一斤',
          articleStatusId: 1,
          author: '宋涛',
          createTime: '2002-11-21 21:28:57',
          reply: 18,
          view: 62,
          replyName: '任桂英',
          replyTime: '1993-06-13 12:01:36',
          theme: '柴米油盐',
          articleStatus: '[已完成]'
        },
        {
          themeId: 2,
          title: '金龙鱼调和油',
          articleStatusId: 0,
          author: '马洋',
          createTime: '1986-06-13 11:27:33',
          reply: 10,
          view: 38,
          replyName: '易艳',
          replyTime: '1982-07-29 23:37:40',
          theme: '柴米油盐',
          articleStatus: '已完成'
        },
        {
          themeId: 0,
          title: '葵花菜籽油',
          articleStatusId: 1,
          author: '沈静',
          createTime: '1971-05-19 06:26:06',
          reply: 8,
          view: 54,
          replyName: '潘超',
          replyTime: '1988-04-22 02:28:18',
          theme: '柴米油盐',
          articleStatus: '投票中'
        },
        {
          themeId: 1,
          title: '新鲜白菜0.3元一斤',
          articleStatusId: 0,
          author: '曾霞',
          createTime: '1990-05-14 21:34:45',
          reply: 13,
          view: 43,
          replyName: '江超',
          replyTime: '2009-03-19 20:31:04',
          theme: '新鲜蔬菜',
          articleStatus: '投票中'
        },
        {
          themeId: 3,
          title: '黄瓜2元一斤',
          articleStatusId: 1,
          author: '万明',
          createTime: '2016-09-13 18:54:25',
          reply: 10,
          view: 55,
          replyName: '许静',
          replyTime: '2002-08-02 18:21:44',
          theme: '新鲜蔬菜',
          articleStatus: '投票中'
        },
        {
          themeId: 2,
          title: '土豆2元一斤',
          articleStatusId: 1,
          author: '顾敏',
          createTime: '1993-11-30 23:01:38',
          reply: 6,
          view: 23,
          replyName: '蔡秀兰',
          replyTime: '1991-08-22 16:14:55',
          theme: '新鲜蔬菜',
          articleStatus: '[已过期]'
        },
        {
          themeId: 1,
          title: '现摘西瓜0.8元一斤',
          articleStatusId: 1,
          author: '汪磊',
          createTime: '1970-06-13 07:36:35',
          reply: 6,
          view: 64,
          replyName: '锺平',
          replyTime: '1998-01-13 21:16:18',
          theme: '时令水果',
          articleStatus: '[采购中]'
        },
        {
          themeId: 1,
          title: '佳农香蕉2元一斤',
          articleStatusId: 0,
          author: '阎洋',
          createTime: '2013-02-02 02:42:26',
          reply: 6,
          view: 46,
          replyName: '崔勇',
          replyTime: '2011-11-29 12:42:44',
          theme: '时令水果',
          articleStatus: '采购中'
        },
        {
          themeId: 3,
          title: '绿宝石甜瓜3元一斤',
          articleStatusId: 0,
          author: '邹涛',
          createTime: '2006-05-18 03:29:21',
          reply: 12,
          view: 44,
          replyName: '曹洋',
          replyTime: '1992-07-20 01:09:25',
          theme: '时令水果',
          articleStatus: '采购中'
        }
      ],
      ArticleList: [],
      contentList: [],
      showgotop: true,
      messageFlag: false,
      sections: [],
      chosenVote: {}
    }
  },
  computed: {},
  created() {
    // this.getAllArticleList();
    // this.ArticleList = this.allArticleList // Api 删除此条 恢复上面一行
  },
  mounted() {
    this.showGotop()
    getAllVotes(this.queryParams).then(response => {
      this.contentList = response.rows
      this.total = response.total
      console.log(response)
    })
    getAllSections().then(response => {
      this.sections = response
    })
  },
  methods: {
    refreshVoteList() {
      getAllVotes(this.queryParams).then(response => {
        this.contentList = response.rows
        this.total = response.total
        console.log(response)
      })
    },
    deleteVote(id) {
      deleteHelpVoteById(id).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    updateStatus(item) {
      if (item.status === '投票中') {
        item.status = '采购中'
      } else {
        item.status = '已完成'
      }
      updateVoteContent(item).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    addStatus() {
      this.formForNewColumn.status.push({
        statusName: ''
      })
    },
    deleteStatus(item, index) {
      this.index = this.formForNewColumn.status.indexOf(item)
      if (index !== -1) {
        this.formForNewColumn.status.splice(index, 1)
      }
    },
    gotop() {
      scrollTo(0, 200)
    },
    showGotop() {
      window.onscroll = function() {
        if (document.documentElement.scrollTop > 200) {
          this.showgotop = true
        } else {
          this.showgotop = false
        }
      }
    },
    toDemand(index) {
      this.$router.push({ path: 'demandDetail', query: { index: index }})
    },
    toNewDemand() {
      this.$router.push({ path: 'newDemand' })
    },
    getAllArticleList() {
      getList().then((response) => {
        this.ArticleList = response.data.list.items
        this.themeWords = response.data.list.themeWords
        this.themeStatus = response.data.list.themeStatus
      })
    },
    getList(temp) {
      // const params = { themeId: temp };
      // getExList(params).then((response) => {
      //   this.ArticleList = response.data.items;
      // });  api接口4行
      const chosenTheme = temp
      this.ArticleList = this.allArticleList.filter((item) => {
        if (item.themeId !== parseInt(chosenTheme)) return false
        return true
      })
    },
    getListBystatus(index, statusIndex) {
      // const params = { themeIndex: index, themeStatusIndex: statusIndex };
      // console.log(params);
      // getExListBystatus(params).then((response) => {
      //   this.ArticleList = response.data.items;
      // }); api接口 5行
      this.ArticleList = this.allArticleList.filter((item) => {
        if (
          item.themeId === parseInt(index) &&
          item.articleStatusId === parseInt(statusIndex)
        ) {
          return true
        }
        return false
      })
    }
    // getExListAndSetBtn(themeId) {
    //   // const div = document.getElementById("themeDiv");
    //   // const btns = div.getElementsByTagName("button");
    //   // for (let i = 0; i < btns.length; i++) {
    //   //   btns[i].style.borderColor = "RGB(96,98,102)";
    //   //   btns[i].style.color = "RGB(96,98,102)";
    //   // }
    //   // const btn = document.getElementById("" + themeId);
    //   // btn.click();
    //   // btn.style.borderColor = "RGB(24,144,255)";
    //   // btn.style.color = "RGB(24,144,255)";
    //   this.getList(themeId);
    // },
  }
}
</script>

<style lang="scss" scoped>
  .all {
    width: 80%;
    min-width: 900px;
    margin: 15px auto;
  }
  #bbsMyDiv {
    margin-right: 15px;
  }
  .boardDiv {
    margin: 15px 15px;
  }
  .boardTitle {
    margin-right: 50px;
  }
  .pipe {
    margin-right: 15px;
    margin-left: 15px;
    color: darkgrey;
  }
  .boardNumber {
    color: orangered;
    margin-left: 10px;
  }
  .boardContent {
    margin-top: 20px;
    letter-spacing: 1.5px;
  }
  .el-dropdown {
    margin: 0 5px;
  }
  .handupDiv {
    height: 30px;
    margin: 15px 15px;
  }
  .btnSpan {
    float: left;
  }
  .pageSpan {
    float: right;
  }
  .dividerDiv {
    height: 30px;
    margin: 15px 15px;
  }
  .articleDiv {
    margin: 15px 15px;
  }
  .articleList {
    border: 1px solid #ccc;
  }
  .articleList table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #aaa;
    font-size: 14px;
    line-height: 1.5px;
  }
  .articleList table thead tr td {
    background-color: #eee;
    height: 45px;
  }
  .input-with-select {
    width: 600px;
    margin-right: 10px;
  }
  .articleList table thead tr td span {
    margin-left: 16px;
    color: #336699;
  }
  .articleList table tr td {
    border-bottom: 1px solid #aaa;
    height: 15px;
  }
  .articleList table tbody tr td a:first-child {
    //帖子前的类别
    color: (rgb(9, 152, 248));
    margin-right: 10px;
    margin-left: 16px;
    text-decoration: none;
  }
  .articleList table tbody tr td a:hover {
    text-decoration: underline;
  }
  .articleList table tbody tr td span:last-child {
    //帖子后的状态
    color: #cdcdcd;
    margin-right: 10px;
    margin-left: 16px;
  }
  .checkMessage {
    display: block;
    max-height: 150px;
  }
  .articleList table tr td p:last-child {
    color: #999;
  }
  .articleList table tbody tr {
    height: 20px;
    display: table-row;
  }
  .articleList table tbody tr td {
    height: 20px;
    display: table-cell;
  }
  .articleList table tbody tr:hover {
    background-color: #eee;
  }
  .themeDiv {
    width: 100%;
    height: 30px;
    margin: 15px 15px;
  }
  .themeSpan {
    text-align: center;
    float: right;
    display: block;
    background-color: #999999;
    color: rgb(255, 255, 255);
    width: 27px;
    border-radius: 3px;
    margin-left: 5px;
    font-size: 13px;
    height: 15px;
  }
  #back {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 70px;
    bottom: 70px;
    color: #1890ff;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
  }
  #back:hover {
    background-color: #f2f6fc;
  }
  #aToArticle:hover {
    text-decoration: underline;
  }
  .el-icon-caret-top {
    transform: translate(10px, 8px);
  }
  // .themeDiv botton:active {
  //   border-c: 1px #1890ff;
  //   color: #1890ff;
  // }
</style>

